<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<title>客户管理</title>
<meta name="decorator" content="default" />
<style type="text/css">
#productList {
	float: right;
	width: 78%;
	height: 8em;
	border: 1px solid #cccccc;
	display: block;
	overflow: auto;
	border-radius: 0;
}
</style>
</head>
<body>
	<div data-role="navbar">
		<ul>
			<li><a
				href="${ctx}/base/customer/detail?id=${customerId}&emsId=${emsId}">客户基本资料</a></li>
			<li><a href="${ctx}/expert/customerExam/list">专家方案</a></li>
			<li><a href="#" class="ui-btn-active">客户卡信息</a></li>
			<li><a href="${ctx}/base/customer/consume">客户消费记录</a></li>
		</ul>
	</div>
	<tags:message content="${message}" />
	<c:set var="emsId" scope="session" value="${emsId}"></c:set>
	<c:set var="customerId" scope="session" value="${customerId}"></c:set>
	<div class="icon-buttons">
		<a id="returnBtn" class="leave-detail" data-role="button"
			data-inline="true" data-icon="back" data-iconpos="notext" href="#">返
			回</a>
	</div>
	<div class="middleCls">
		卡状态 :
		<fieldset data-role="controlgroup" data-type="horizontal"
			data-inline="true">
			<input type="radio" name="cardStatus" id="radio-choice-b" value="1"
				checked> <label for="radio-choice-b">可用</label> <input
				type="radio" name="cardStatus" id="radio-choice-c" value="2">
			<label for="radio-choice-c">失效</label> <input type="radio"
				name="cardStatus" id="radio-choice-a" value="0"> <label
				for="radio-choice-a">全部</label>
		</fieldset>
	</div>
	<div data-role="collapsible" data-collapsed="false">
		<h4>计次护理卡(${fn:length(member.currentCards.timesCards)})</h4>
		<div class="middleCls">
			<c:if test="${empty member.currentCards.timesCards}">
				<h4>无记录</h4>
			</c:if>
			<c:if test="${not empty member.currentCards.timesCards}">
				<table id="cardTimesTable" data-role="table"
					class="ui-responsive table-stroke">
					<thead>
						<tr>
							<th>卡名</th>
							<th>编号</th>
							<th>护理项目</th>
							<th>剩余次数</th>
							<th>开卡时间</th>
							<th>当前状态</th>
						</tr>
					</thead>
					<tbody>
						<c:forEach items="${member.currentCards.timesCards}" var="card">
							<tr id="${card.id}" type="times"
								class="${card.status==0? 'enableCls':'disableCls'}">
								<td>${card.template.name}</td>
								<td>${card.cardNumber}</td>
								<c:if test="${card.template.storeCare.care_type==0}">
									<td>${card.template.storeCare.care.name}</td>
								</c:if>
								<c:if test="${card.template.storeCare.care_type==1}">
									<td>${card.template.storeCare.storeSelfCare.name}</td>
								</c:if>
								<td>${card.remainTimes}次</td>
								<td>${fns:formatDate(card.beginTime, "yyyy-MM-dd
										HH:mm:ss")}</td>
								<td>${card.status==0?'可用':'不可用'}</td>
							</tr>
						</c:forEach>

					</tbody>
				</table>
			</c:if>
		</div>
	</div>
	<div data-role="collapsible" data-collapsed="false">
		<h4>时段护理卡(${fn:length(member.currentCards.durationCards)})</h4>
		<div class="middleCls">
			<c:if test="${empty member.currentCards.durationCards}">
				<h4>无记录</h4>
			</c:if>
			<c:if test="${not empty member.currentCards.durationCards}">
				<table id="cardDurationTable" data-role="table"
					class="ui-responsive table-stroke">
					<thead>
						<tr>
							<th>卡名</th>
							<th>编号</th>
							<th>护理项目</th>
							<th>开卡时间</th>
							<th>终止时间</th>
							<th>当前状态</th>
						</tr>
					</thead>
					<tbody>
						<c:forEach items="${member.currentCards.durationCards}" var="card">
							<tr id="${card.id}" type="duration"
								class="${card.status==0? 'enableCls':'disableCls'}">
								<td>${card.template.name}</td>
								<td>${card.cardNumber}</td>
								<c:if test="${card.template.storeCare.care_type==0}">
									<td>${card.template.storeCare.care.name}</td>
								</c:if>
								<c:if test="${card.template.storeCare.care_type==1}">
									<td>${card.template.storeCare.storeSelfCare.name}</td>
								</c:if>
								<td>${fns:formatDate(card.beginTime, "yyyy-MM-dd
										HH:mm:ss")}</td>
								<td>${fns:formatDate(card.endTime, "yyyy-MM-dd HH:mm:ss")}</td>
								<td>${card.status==0?'可用':'不可用'}</td>
							</tr>
						</c:forEach>
					</tbody>
				</table>
			</c:if>
		</div>
	</div>
	<div data-role="collapsible" data-collapsed="false">
		<h4>产品充值卡(${fn:length(member.currentCards.productCards)})</h4>
		<div class="middleCls">
			<c:if test="${empty member.currentCards.productCards}">
				<h4>无记录</h4>
			</c:if>
			<c:if test="${not empty member.currentCards.productCards}">
				<table id="cardProductTable" data-role="table"
					class="ui-responsive table-stroke">
					<thead>
						<tr>
							<th>卡名</th>
							<th>编号</th>
							<th>适用产品</th>
							<th>卡内余额</th>
							<th>产品折扣</th>
							<th>当前状态</th>
						</tr>
					</thead>
					<tbody>
						<c:forEach items="${member.currentCards.productCards}" var="card">
							<tr id="${card.id}" type="product"
								class="${card.status==0? 'enableCls':'disableCls'}">
								<td>${card.template.name}</td>
								<td>${card.cardNumber}</td>
								<td>
									<ul id="productList" data-role="listview" data-inset="true"	data-split-theme="a">
										<c:forEach items="${card.template.productList}" var="detail"
											varStatus="status">
											<c:choose>
												<c:when test="${detail.storeProduct.product_type==0}">
													<li>${detail.storeProduct.product.name}</li>
												</c:when>
												<c:when test="${detail.storeProduct.product_type==1}">
													<li>${detail.storeProduct.storeSelfProduct.name}</li>
												</c:when>
											</c:choose>
										</c:forEach>
									</ul>
								</td>
								<td>${card.money}</td>
								<td>${card.productDiscount}</td>
								<td>${card.status==0?'可用':'不可用'}</td>
							</tr>
						</c:forEach>
					</tbody>
				</table>
			</c:if>
		</div>
	</div>
	<div data-role="collapsible" data-collapsed="false">
		<h4>综合充值卡(${fn:length(member.currentCards.allCards)})</h4>
		<div class="middleCls">
			<c:if test="${empty member.currentCards.allCards}">
				<h4>无记录</h4>
			</c:if>
			<c:if test="${not empty member.currentCards.allCards}">
				<table id="cardAllTable" data-role="table"
					class="ui-responsive table-stroke">
					<thead>
						<tr>
							<th>卡名</th>
							<th>编号</th>
							<th>卡内余额</th>
							<th>产品折扣</th>
							<th>护理折扣</th>
							<th>当前状态</th>
						</tr>
					</thead>
					<c:forEach items="${member.currentCards.allCards}" var="card">
						<tr id="${card.id}" type="all"
							class="${card.status==0? 'enableCls':'disableCls'}">
							<td>${card.template.name}</td>
							<td>${card.cardNumber}</td>
							<td>${card.money}</td>
							<td>${card.productDiscount}</td>
							<td>${card.careDiscount}</td>
							<td>${card.status==0?'可用':'不可用'}</td>
						</tr>
					</c:forEach>
					<tbody>
					</tbody>
				</table>
			</c:if>
		</div>
	</div>
	<script type="text/javascript">
		function show(jsonData) {
			//FXIME show in page
			var cardConsume = JSON.parse(jsonData);
			var cardDetails = cardConsume.card;
			var html = "";
			html += "卡名： " + cardDetails.name + " 编号：" + cardDetails.number
					+ "<br/>";
			var consumeList = cardConsume.consumes;
			html += "消费类型 " + "  时间      " + "   花费   " + " 员工 " + "<br/>";
			for (var index = 0; index < consumeList.length; index++) {
				html += consumeList[index].type + "    "
						+ consumeList[index].time + "      "
						+ consumeList[index].realCost + "  "
						+ consumeList[index].employeeName + "<br/>";
			}
		}

		function initCardStatus() {
			//隐藏所有不可用的
			jQuery(".disableCls").hide();
		}
		$(document)
				.ready(
						function() {
							$("tbody tr").click(function() {
								var type = $(this).attr("type");
								var cardID = $(this).attr("id");
								jQuery.ajax({
									url : "${ctx}/cash/member/carddetails",
									type : "post",
									data : {
										"cardID" : cardID,
										"cardType" : type,
									},
									success : function(data) {
										show(data);
									},
									error : function(data) {
										showTip("查询消费详情失败");
									}
								});// end ajax
							});
							$("input[name='cardStatus']")
									.click(
											function() {
												var val = jQuery(
														"input[name='cardStatus']:checked")
														.val();
												jQuery(".enableCls").show();
												jQuery(".disableCls").show();
												if (val == 1) {
													jQuery(".disableCls")
															.hide();
												}
												if (val == 2) {
													jQuery(".enableCls").hide();
												}
											});
							//离开本模块时,清除使用过的session
							$(".leave-detail")
									.click(
											function() {
												sessionStorage
														.removeItem("target");
												var target = this.href;
												var url = "${ctx}/cleanSession?sessionKeys=emsId,customerId";
												var backFun = function() {
													window.location.href = target;
												};
												syncToServer(url, backFun);
												return false;
											});
							initCustomerDetailReturnButton("${ctx}",
									"${emsId}", "${customerId}");
							initCardStatus();
						});
	</script>
</body>
</html>
